<template>
  <div>
    <van-nav-bar @click-left="onClickLeft" left-arrow title="登录" />
    <img src="../../assets/img/logo.jpg" alt="" />
    <div class="z">
      <h2>账号密码登录</h2>

      <van-form ref="form">
        <van-cell-group inset>
          <van-field v-model="userInfo.accounta" placeholder="输入手机号(登录账号)" :rules="[{ required: true, message: '必填' }]" />
          <van-field v-model="userInfo.passworda" placeholder="设置密码" :rules="[{ required: true, message: '必填' }]"
            type="password" />
        </van-cell-group>
        <van-checkbox shape="square" icon-size="12px" style="margin-left: -190px" v-model="checked">记住登录</van-checkbox>
        <div>
          <van-button round block native-type="submit" @click="formSubmit">
            登录
          </van-button>
        </div>
      </van-form>
      <a href="Zhuce">没有账号？立即注册</a>
    </div>
  </div>
</template>

<script>
import LoginApi from "@/http/apis/Login.Api";
import router from "@/router";
import { showNotify } from "vant";
import "vant/es/notify/style";
import { ref } from "vue";
import storage from "../../utils/storerage";
import store from "@/store";

export default {
  setup() {
    const onClickLeft = () =>
      router.push(localStorage.getItem(storage.KEY.CurrentPath));

    //用户信息
    let userInfo = ref(store.state.userInfo);

    //信息提交
    let form = ref();
    function formSubmit() {
      form.value
        .validate()
        .then((result) => {
          if (result) return;
          let params = {
            accounta: userInfo.value.accounta,
            passworda: userInfo.value.passworda,
          };
          LoginApi.LoginUser(params).then((res) => {
            console.log(res);
            if (res.data.code === 200) {
              showNotify({ type: "success", message: res.data.msg });
              localStorage.setItem(storage.KEY.Authorization, res.data.token);
              res.data.data.passworda = userInfo.value.passworda;
              store.commit("updateUserInfo", res.data.data);
              if (checked.value) {
                localStorage.setItem(storage.KEY.Checked, true);
                storage.localStorageSet(storage.KEY.UserInfo, res.data.data);
                storage.sessionStorageSet(storage.KEY.UserInfo, res.data.data);
              } else {
                localStorage.removeItem(storage.KEY.Checked);
                storage.localStorageRemove(storage.KEY.UserInfo);
                storage.sessionStorageSet(storage.KEY.UserInfo, res.data.data);
              }
              let path = localStorage.getItem(storage.KEY.CurrentPath);
              if (path === "/Zhuce")
                router.push("/home/index");
              else router.push(path);
            }
          });
        })
        .catch(() =>
          showNotify({ type: "danger", message: "请填写账号和密码" })
        );
    }

    //记住登录
    let checked = ref(storage.localStorageGet(storage.KEY.Checked) || false);

    return {
      onClickLeft,
      userInfo,
      formSubmit,
      form,
      checked,
    };
  },
};
</script>

<style lang="scss" scoped>
img {
  border-radius: 50%;
  width: 200px;
  margin: 30px 80px;
}

.z {
  width: 300px;
  margin: 0 auto;
}

::v-deep .van-field__control {
  outline: none;
  border: 1px solid #ccc;
  font-size: 10px;
  width: 250px;
  height: 35px;
  padding: 10px;
  border-radius: 4px;
  margin-bottom: 10px;
}

::v-deep .van-field__error-message {
  position: absolute;
  height: 20px;
  margin-top: -8px;
}

::v-deep .van-checkbox__label {
  line-height: 25px;
}

h2 {
  margin: 20px 90px;
}

.van-form {
  display: flex;
  flex-direction: column;
  align-items: center;
}

button {
  width: 250px;
  height: 40px;
  border: 1px solid black;
  border-radius: 6px;
  background-color: rgba(255, 209, 26, 0.942);
  color: white;
  font-size: 15px;
  margin: 10px 45px;
}

a {
  display: block;
  color: blue;
  margin: 0 10px 0 25px;
}
</style>
